<template>
	<view class="video-page">
		<!-- {{refresh}} -->
		<u-list height="100%" :lowerThreshold="50" @scrolltolower="scrolltolowerHandle">
			<u-list-item class="videos-list" v-for="(l, i) in videosArr" :key="i">
				<VideosItem
					v-if="l.type == 1"
					:authorPic="l.r.a.p"
					:authorName="l.r.a.n"
					:lvl="l.r.a.lvl"
					:img="l.r.img"
					:collectUsers="l.r.collect_users"
					:collectCount="l.r.collect_count_text"
					:title="l.r.n"
				></VideosItem>
			</u-list-item>
			<u-list-item>
				<!-- <view class="loading-text">
					<u-loading-icon size="48"></u-loading-icon>
					<text>加载更多</text>
				</view> -->
				<u-gap height="30" bgColor="#fff"></u-gap>
				<LoadingBar></LoadingBar>
			</u-list-item>
		</u-list>
	</view>
	
</template>

<script>
	import { mapState } from 'vuex'
	import { http } from '../untils/http.js'
	import VideosItem from '../../douguoApp/components/items/RecommendedItem.vue'
	import LoadingBar from '../../douguoApp/components/LoadingBar.vue'
	
	const url = `home/videos/0/10`
	
	export default {
		name:"VideosView",
		props: ['refresh'],
		data() {
			return {
				videosArr: [],
				// loading 标记网络正在请求中，避免反复调用
				loading: false
			};
		},
		created() {
			console.log('视频页面出生了');
			http(url).then(res => {
				console.log('视频页面自己发送网络请求拿到的数据', res);
				
				this.videosArr = res.result.list
				console.log(this.videosArr);
				this.$nextTick(() => {
					this.loading = false
				})
			})
			// this.getDataFromServerData()
		},
		components: {
			VideosItem,
			LoadingBar
		},
		methods: {
			getDataFromServerData(cb) {
				console.log('重新请求数据');
				
				// const url = `home/videos/${this.videosArr.length}/20`
				
				let timeStamp = new Date().getTime()
				http(url + '?timestamp=' + timeStamp).then((res) => {
					// console.log('视频页面自己发送网络请求拿到的数据', res);
					
					cb&&this.$nextTick(cb)
					
					// es6
					this.videosArr = res.result.list
					// this.videosArr = res.list
					// console.log(this.videosArr);
					
					// Vue提供的API this.$nextTick 下一帧
					// 当数据发生改变时，页面会异步地更新渲染
					// $nextTick 本次异步更新渲染完毕
					// 新的数据添加到页面上后才允许下一次网络请求
					// this.$nextTick(() => {
					// 	this.loading = false
					// })
				})
				
			},
			getVideosFromSerever() {
				this.loading = true
				let url = 'home/videos/' + this.videosArr.length + '/20'
				
				// 第一次网络请求，需要请求topics
				// 后续加载不需要请求
				http(url).then(res => {
				
					this.videosArr = [...this.videosArr, ...res.result.list]
					console.log(this.videosArr);
				
					this.$nextTick(() => {
						this.loading = false
					})
				})
			},
			scrolltolowerHandle() {
				console.log('list滚动到底部了');
				if(!this.loading) {
					this.getVideosFromSerever()
				}
			}
		},
		watch: {
			refresh(newValue) {
				console.log('video 监听到refresh变化', newValue);
				
				// refresh为真时发起网络请求，为真表示开启下拉刷新
				if(newValue) {
					// 模拟网络请求
					setTimeout(() => {
						uni.stopPullDownRefresh()
						// 子组件打电话给父组件反向传值
						this.$emit('changeRefresh', false)
					}, 1000)
				}
				
				
			}
		}
	}
</script>

<style lang="scss">
	.video-page {
		position: fixed;
		top: 77px;
		bottom: 50px;
	}
	
	.loading-text {
		display: flex;
		justify-content: center;
		align-items: center;
		color: #666;
		font-weight: 600;
		
		text {
			margin-left: 10px;
			font-size: 14px;
		}
	}
</style>